<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">用户分布图</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!home_console">首页</a>
          <a><cite>用户分布图</cite></a>
        </span>
    </div>
    <div class="layui-body" style="left:0px;height: 90%" id="map"></div>
</div>
<!-- js部分 -->


<script>
    layui.use(['form', 'table', 'util', 'config', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var config = layui.config;
        var index = layui.index;
        var admin = layui.admin;
        var laytpl = layui.laytpl;

		debugger ;

        // layer.load(2);
        //地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url:'http://mt3.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}'
                    })
                })

            ],
            target: 'map',
            view: new ol.View({
                center: [96.51, 19.55],
                projection: 'EPSG:4326',
                zoom: 4
            }),
            controls: ol.control.defaults().extend([
                new ol.control.MousePosition()
            ]),

        });


           layer.load(2);
           var source,clusterSource,styleCache = {},clusters ;
           var features = new Array();
           $.ajax({
               url: config.base_server + 'api-log/nginxLog?access_token='+config.getToken().access_token ,
               type : 'get',
               async: false,//使用同步的方式,true为异步方式
               data : { },//这里使用json对象
               success : function(resp){
                   layer.closeAll('loading');
                   if (resp.code == 0) {
                       // debugger ;
                       for (i = 0; i < resp.data.length; i++) {
                            var item = resp.data[i];
                           if(item != null && typeof(item) !=undefined) {
                               var coordinates = [Number(item.lon),Number(item.lat)];
                               features.push( new ol.Feature(new ol.geom.Point(coordinates)));
                           }
                       }
                       debugger ;
                       //适量数据源
                       source = new ol.source.Vector({
                           //要素
                           features: features
                       });
                       //聚合数据源
                       clusterSource = new ol.source.Cluster({
                           //标注元素之间的间距
                           distance: 40,
                           //数据源
                           source: source
                       });
                       //矢量图层
                       clusters = new ol.layer.Vector({
                           //数据源
                           source: clusterSource,
                           //样式
                           style: function (feature, resolution) {

                               //当前聚合标注数据源的要素大小
                               var size = feature.get('features').length;
                               //定义样式
                               var style = styleCache[size];
                               //如果当前样式不存在则创建
                               if (!style) {
                                   style = [
                                       //初始化样式
                                       new ol.style.Style({
                                           //点样式
                                           image: new ol.style.Circle({
                                               //点的半径
                                               radius: 12,
                                               //笔触
                                               stroke: new ol.style.Stroke({
                                                   color: '#00FF00'
                                               }),
                                               //填充
                                               fill: new ol.style.Fill({
                                                   color: '#00FF00'
                                               })
                                           }),
                                           //文本样式
                                           text: new ol.style.Text({
                                               //文本内容
                                               text: size.toString(),
                                               //填充
                                               fill: new ol.style.Fill({
                                                   color: '#FF0000'
                                               })
                                           })
                                       })
                                   ];
                                   styleCache[size] = style;
                               }
                               return style;
                           }
                       });
                       //将聚合标注图层添加到map中
                       map.addLayer(clusters);

                   }
               },
               fail:function(){
                   //code here...
               }
           });

    });
</script>
                    